import React, { useState, useEffect } from 'react';
import { List, Avatar } from 'antd';
import styles from './song-list.less';
import {
  PlusCircleOutlined,
  PlayCircleOutlined,
  MessageOutlined,
  RightCircleOutlined,
  CloudDownloadOutlined,
  ShareAltOutlined,
} from '@ant-design/icons';
import { getDuration } from '@/utils';

const SongList: any = (props: any) => {
  let { dataSourceList } = props;
  let index: number = 0;
  const [current, setIndex] = useState(1);

  useEffect(() => {
    setIndex(1);
  }, [dataSourceList]);

  return (
    <div className={styles.list}>
      <List
        itemLayout="horizontal"
        dataSource={dataSourceList}
        pagination={{
          onChange: page => {
            setIndex(page);
          },
          pageSize: 20,
          current: current,
        }}
        renderItem={(item: any) => (
          <List.Item
            actions={[
              <a key="0">
                <RightCircleOutlined className={styles.iconSize} />
              </a>,
              <a key="1">
                <PlusCircleOutlined className={styles.iconSize} />
              </a>,
              <a key="2">
                <ShareAltOutlined className={styles.iconSize} />
              </a>,
              <a key="3">
                <CloudDownloadOutlined className={styles.iconSize} />
              </a>,
            ]}
          >
            <List.Item.Meta
              avatar={<Avatar src={item.avatar} shape="square" size={46} />}
              title={item.title}
              description={item.description}
            />
            <div>{getDuration(item.duration)}</div>
          </List.Item>
        )}
      />
    </div>
  );
};
export default SongList;
